<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <!-- MVVM中的View -->
    <div id="app">
      <!-- <input v-color="{color: 'red'}" type="text" /> -->
      <!-- <input v-color="'blue'" type="text" /> -->

      <!-- 
      如果你的指令的属性值，不用字符串包裹，它会当成一个模型中的变量，那么
      你就需要在data中进行定义 -->
      <input v-color="color" type="text" />
    </div>

    <script>
      // 定义全局指令（全局：其它组件都可以使用，相当于它是一个公共的）
      /**
       * 参数1：指令的名字，不要加 v-
       * 参数2：对象，用于实现指令的逻辑
       */
      //   Vue.directive('focus', {
      //     inserted(el) {
      //       // el代表我们的指令作用于哪个节点上，他就代表哪个节点
      //       //   console.log(el)
      //       el.focus()
      //     }
      //   })

      Vue.directive('color', {
        /**
         * 参数1：节点
         * 参数2：自定义指令传递过来的参数
         */
        inserted(el, binding) {
          console.log(el)
          console.log(binding)
          el.focus()
          el.style.backgroundColor = binding.value
        }
      })

      // 定义多个全局指令
      //   Vue.redirect('其它',{})

      new Vue({
        el: '#app', // el属性必须要写，这个el属性代表的是vue解析的范围
        data: {
          color: 'skyblue'
        },
        directives: {
          // 局部指令
          //   focus: {
          //     inserted(el) {
          //       // el代表我们的指令作用于哪个节点上，他就代表哪个节点
          //       //   console.log(el)
          //       el.focus()
          //     }
          //   }
        }
      })
    </script>
  </body>
</html>
